<%--
    Document   : index
    Created on : Mar 12, 2013, 1:46:39 PM
    Author     : Thinh
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib tagdir="/WEB-INF/tags/common_admin/" prefix="common" %>
<%@taglib uri="/struts-tags" prefix="s" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/xml" prefix="x" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>

<html>
    <common:head/>
    <body>
        <div class="admin-container">
            <common:header />
            <div class="leftColumn">
                <h2>Menu</h2>
                <div class="box sidemenu" style="height: 982px;">
                    <common:navigation />
                </div>
            </div>
            <div class="rightColumn">
                <div class="boxa round first grid">
                    <h2>Table & Grids</h2>

                    <a href="#add-new-product-form" style="text-decoration:none; margin-top: 10px" class="custom-button" onclick="addProduct()">Add Product</a>                   
                    <div id="productConcac">
                        <c:import var="xslt" url="/WEB-INF/xsl/productTable.xsl"/>
                        <c:import var="xml" url="/WEB-INF/xml/products.xml" />
                        <x:transform xml="${xml}" xslt="${xslt}">
                            <x:param name="fieldToSort" value="name"/>
                            <x:param name="sortCondition" value="ascending"/>
                            <x:param name="dataType" value="text"/>
                        </x:transform>
                    </div>
                    <!-- add new product form -->
                    <div style="margin-top: 50px;">
                        <form action="../adminproduct/addnewproduct.html" name="newProductForm" method="POST">
                            <a href="#x" class="overlay" id="add-new-product-form"></a>
                            <div class="popup">
                                <h2>Add new product</h2>
                                <div style="margin-top:10px">
                                    <label for="name"> Name(*): </label>
                                    <input required title="6 to 30 characters" id="name" type="text" name="product.name" pattern=".{6,30}" />
                                </div>
                                <div>
                                    <label for="price"> Price(*): </label>
                                    $<input  required title="Only number please" id="price" type="number" name="product.price" maxlength="20"/>
                                </div>
                                <div>
                                    <label for="quantity"> Quantity(*): </label>
                                    <input required title="" id="quantity" type="number" min="1" max="1000" name="product.quantity" />
                                </div>
                                <div>
                                    <label for="category"> Category: </label>
                                    <select id="addCategory" name="category" onclick="">
                                        <s:iterator value="categories" status="categoryStatus" id="category">
                                            <option value="<s:property value="id"/>"><s:property value="name"/></option>
                                        </s:iterator>
                                    </select>
                                </div>
                                <div>
                                    <label for="quantity"> Description(*): </label>                                    
                                    <textarea title="No more than 800 characters please!" required maxlength="800" rows="4" cols="20" name="product.description" id="description"></textarea>
                                </div>
                                <div>
<!--                                    <label for="address">  </label>-->
                                    <s:checkbox name="product.isShowed" fieldValue="true" label="Is Showed:"/>
                                </div>
                                <div>
                                    <label for="fileChoose">Files to upload</label>
                                    <input type="file" id="filesToUpload" name="files"   accept="image/*"/>
                                    <div id="filedrag" name="file">
                                        <label id="message">or drop your file here</label>                                        
                                    </div>
                                    <div id="imageResult">
                                        <img id="resultImage" hidden height="100px" width="200px"/>
                                    </div>
                                    <input type="hidden" id="namePicture" value="" name="images"/>
                                </div>
                                <input type="submit" value="Add"/>
                                <input type="reset" value="Clear" onclick="clearAddProduct()" id="btnClear" />
                                <a class="close" href="#close"></a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="clear">
        </div>
        <common:footer />
    </body>
</html>
